<template>
  <div style="margin-right: 500px">
    <div style="margin-right: 100px">
      <span style="font-weight: bold">群公告: </span>
      <el-button @click="centerDialogVisible2=true" style="margin-left: 20px" size="mini" type="primary"
                 icon="el-icon-edit" circle></el-button>
    </div>

    <div style="margin-right: 100px;margin-top: 20px">
      <span style="font-weight: bold">群头像: </span>
      <el-button @click="centerDialogVisible=true" style="margin-left: 20px" size="mini" type="primary"
                 icon="el-icon-edit" circle></el-button>
    </div>

    <el-dialog
        title="群默认头像"
        :visible.sync="centerDialogVisible"
        width="30%"
    >
      <el-upload
          class="avatar-uploader"
          :action="getImg+'/common/updateImg'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="centerDialogVisible=false">关闭</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="群公告"
        :visible.sync="centerDialogVisible2"
        width="30%"
        center>
      <el-input
          type="textarea"
          :rows="2"
          maxlength="50"
          show-word-limit
          placeholder="请输入内容"
          v-model="contents">
      </el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="updateGroupContent">确 定</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "SystemSet",
  data() {
    return {
      imageUrl: "",
      getImg: '',
      contents: "",
      centerDialogVisible2: false,
      centerDialogVisible: false
    }
  },
  mounted() {
    this.queryContent();
    this.getImg = this.$global_msg.api_host;
  },
  methods: {
    handleAvatarSuccess(res, file) {
      if (res.statusCode == 200) {
        this.$message({
          message: res.message,
          type: 'success'
        });
        setTimeout(function () {
          window.location.reload();
        }, 500);
        this.imageUrl = URL.createObjectURL(file.raw);
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    updateGroupContent() {
      this.axios.put("/group/updateGroupContent/" + this.contents).then(resp => {
        if (resp.data.statusCode == 200) {
          this.$message({
            message: resp.data.message,
            type: 'success'
          });
          this.centerDialogVisible2 = false;
        }
      })
    },
    queryContent() {
      this.axios.get("/group/queryContent").then(resp => {
        if (resp.data.statusCode == 200) {
          //console.log(resp.data)
          this.contents = resp.data.data.content;
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
